<template>
  <div class="pharmacist">
    <div class="console">
      <div class="title">工作台</div>
      <div class="main">
        <div>
          <img src="@/assets/image/img_Onlineinquiry@2x.png" alt />
          <div class="title">线上问诊</div>
          <div class="content" @click="seekHandler(1)">
            <span>{{waiting_num}} 人待咨询</span>
            <router-link to>点击咨询>></router-link>
          </div>
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible1"
            width="25%"
            :before-close="handleClose"
          >
            <span>该咨询为: 图文咨询，是否立即咨询</span>
            <span slot="footer" class="dialog-footer button">
              <el-button @click="dialogVisible">拒 绝</el-button>
              <el-button type="primary" @click="sendState">确 定</el-button>
            </span>
          </el-dialog>
          <!-- 如果拒绝，则显示拒绝原因窗口 -->
          <el-dialog
            title="提示"
            :visible.sync="dialogVisible2"
            width="25%"
            :before-close="handleClose"
          >
            <div class="refuse">
              <span>请选择拒绝原因</span>
              <p>
                <select>
                  <option selected value>无法接诊</option>
                  <option value>其他</option>
                </select>
              </p>
            </div>
            <span slot="footer" class="dialog-footer button">
              <el-button @click="dialogVisible2 = false">取消</el-button>
              <el-button type="primary" @click="dialogVisible2 = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>
        <div>
          <img src="@/assets/image/img_Pharmacisttrial@2x.png" alt />
          <div class="title">修改处方</div>
          <div class="content" @click="changeHandler(1)">
            <span>{{update_pre_num}} 个待审方</span>
            <router-link to>点击查看>></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  props: ["waiting_num","update_pre_num"],
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
    };
  },
  methods: {
    seekHandler(e) {
      this["dialogVisible" + e] = true;
    },
    handleClose(done) {
      done();
    },
    changeHandler(num) {
      this.$emit("changeState", num);
    }, // 拒绝处理函数
    dialogVisible() {
      this.dialogVisible1 = false;
      this.dialogVisible2 = true;
    },
    sendState() {
      // 切换至问诊界面
      this.dialogVisible1 = false;
      this.$emit("changeOnline", false);
    }
  }
};
</script>

<style lang="less" scoped>
.console {
  width: 1000px;
  margin: 0 auto;
  color: #333333;
  font-size: 20px;
}
.console > .title.title {
  font-weight: 500;
  margin-top: 30px;
}
.main {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  height: 100px;
  margin: 50px 0px 50px 0px;
}

.main .title {
  font-size: 18px;
  font-weight: 500;
}
.main > div {
  width: 333px;
}
.main img {
  height: 50px;
  float: left;
  margin-right: 15px;
}
.main .title {
  font-family: MicrosoftYaHei;
  color: #71c0d6;
  font-size: 20px;
  font-weight: 500;
  margin-top: -5px;
  cursor: pointer;
}
.pharmacist .main .content {
  margin-top: 10px;
  color: #656565;
  cursor: pointer;
  font-size: 12px;
  span {
    margin-right:8px;
  }
}
a {
  color: #71c0d6;
  font-size: 12px;
}
// 弹出框操作
.el-dialog .refuse {
  text-align: center;
  span {
    font-size: 22px;
    font-weight: 400;
  }
  select {
    margin-top: 20px;
    width:150px;
    height: 22px;
    outline: none;
  }
}
.el-dialog .el-dialog__footer button {
  width: 80px;
  font-weight: 500;
}
.el-dialog__footer button:nth-child(1) {
  background: #fff;
  border: 1px solid #f00000;
  color: #f00000;
}
.el-dialog__footer button:nth-child(2) {
  background: #f00000;
  border: 0px;
  color: #fff;
}
</style> 